Working with react and Aws amplify

Author
April 06, 2022

In this article i will explain you step by step how you can work with react and aws amplify, cognito authentication , adding graphql api etc

Step 1 Create IAM User and get access key and secret key for that IAM User

In order to work with AWS Amplify you need to create access credentials for the AWS user

  • Create IAM User with the root account of AWS

  • Login with the credentials of IAM User

  • Once Logged in Go to Security Credentials you will find this option on clicking top right corner dropdown icon

  • Under AWS IAM Credentials tab create new Access key and save the credentials somewhere safe

Step 2 Download AWS CLI and configure AWS

(base) ankusingh@192 ~ % aws configure
AWS Access Key ID [****************]:

It will ask for your AWS Access key and AWS Secret key just enter the key which you got in previous step

Step 3 Initializing AWS Amplify

  • Go to your project folder and then initialize aws amplify by running command below
amplify init
  • It will ask you certain option to configure under select authentication method select AWS access keys
Enter a name for the project (amplified)
The following configuration will be applied:

Project information
| Name: amplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
Enter a name for the environment (dev)

# Sometimes the CLI will prompt you to edit a file, it will use this editor to open those files.
Choose your default editor

# Amplify supports JavaScript (Web & React Native), iOS, and Android apps
Choose the type of app that you're building (javascript)

What JavaScript framework are you using (react)

Source directory path (src)

Distribution directory path (build)

Build command (npm run-script build)

Start command (npm run-script start)

Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
  AWS access keys

# This is the profile you created with the `amplify configure` command in the introduction step.
Please choose the profile you want to use (Use arrow keys)
  • Once you have successfully configured aws amplify in your project then run below command to push the configuration
amplify push

  • Once you have pushed the configuration then it will generate aws-exports.js file in your src folder

  • In your react project install aws amplify by running below command

npm install aws-amplify --save
  • Open src/index.js and copy paste the following code
import { Amplify } from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

Step 4 ADD AWS Cognito user pool for authentication using AWS amplify

  • Run below command to add authentication
(base) ankusingh@192 ~ % amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.
  • Push the configuration
amplify push
  • Follow this link for all the authentication API so that you can add to your project

https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#sign-out

Step 5 ADD GraphQl api to interact with dynamodb and perform any type of crud operation

  • Follow this link to add graphql API to your project

https://docs.amplify.aws/start/getting-started/data-model/q/integration/react/